<template>
    <div class="page">
        <a-form class="form">
            <lo-select class="form-item" v-model:value="tableQuery.enableStatus" @change="pageChange(1)" :options="[
                { label: '全部', value: '' },
                { label: '停用', value: '00' },
                { label: '启用', value: '01' },
            ]" placeholder="启用/停用"></lo-select>
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="table_tool mar-b10" v-if="!picker">
                <lo-button size="small" type="primary" color="success" @click="bindMerAccountFn('open')">绑定账户</lo-button>
            </div>
            <div class="flex-1">
                <table-container v-slot="{ containerHeight }">
                    <lo-table :columns="tableColmun" :dataSource="tableData" :height="containerHeight">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex == 'op'">
                                <lo-button @click="editAccountFn('open', record)" class="mar-r10" size="small"
                                    color="primary">编辑</lo-button>
                            </template>
                            <template v-if="column.dataIndex == 'pick'">
                                <lo-button @click="pickAccount(record)" class="mar-r10" size="small"
                                    color="primary">选择</lo-button>
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination @change="pageChange" v-model:current="tablePager.index" :pageSize="tablePager.size"
                    :total="tablePager.total" :showSizeChanger="false" />
            </div>
        </div>

        <lo-modal title="绑定账户" width="600px" ref="bindMerAccountRef" @confirm="bindMerAccountFn('confirm')">
            <div>
                <a-form :label-col="{ style: { width: '100px' } }">
                    <a-form-item label="账户名：">
                        <a-input v-model:value="bindInfo.accountName" placeholder="姓名" />
                    </a-form-item>
                    <a-form-item label="账户：">
                        <a-input v-model:value="bindInfo.accountNo" placeholder="账号" />
                    </a-form-item>
                </a-form>

            </div>
        </lo-modal>


    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, nextTick, computed } from 'vue'
import { getMerAccounts, createAccountByNo } from '@/api/system'
import { useStore } from 'vuex'
const Store = useStore()

const props = defineProps({
    picker: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['pick'])

onMounted(() => {
    getAccountList()
})




// ************ account list ************

// accountStatus ("账户状态：00未申请，01申请成功，02申请中，03停用，04拒绝")
const tableQuery = ref({
    keyWord: ''
})
const tableColmun = computed(() => {
    let col = [
        { title: '序号', type: 'index', },
        { title: '账户名', dataIndex: 'accountName', width: '160px' },
        { title: '账户', dataIndex: 'accountNo', width: '200px' },
        { title: '商户号', dataIndex: 'merNo', width: '160px' },
    ]
    if(props.picker) {
        col = [
            ...col,
            { title: '选择', dataIndex: 'pick'},
        ]
    } else {
        col = [
            ...col,
            { title: '结算银行', dataIndex: 'FSettleAccBankName', width: '160px' },
            { title: '结算银行账号', dataIndex: 'FSettleAccCardNo', width: '180px' },
            { title: '姓名', dataIndex: 'FSettleAccName', width: '100px' },
            { title: '绑定时间', dataIndex: 'createTime', width: '160px' },
            // acountType 1企业，2个体工商户，3个人(小微商户)
            { title: '类型', dataIndex: 'acountType', width: '80px', customRender: ({ record }) => (<span> {{ '1': '企业', '2': '个体工商户', '3': '个人' }[record.acountType]} </span>) },
            { title: '操作', dataIndex: 'op', width: '200px' },
        ]
    }
    return col

})
const tablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const tableData = ref([])
function pageChange(e) {
    tablePager.value.index = e
    setTimeout(getAccountList)
}
function getAccountList() {
    getMerAccounts({
        keyWord: tableQuery.value.keyWord,
        pageIndex: tablePager.value.index,
        pageSize: tablePager.value.size
    }).then(res => {
        tableData.value = res.data.list
        tablePager.value.total = +res.data.total
    })
}




const bindMerAccountRef = ref(null)
const bindInfo = ref({ })
function bindMerAccountFn(type, row) {
    if (type == 'open') {
        bindMerAccountRef.value.open()
        bindInfo.value = {
            accountName: '',
            accountNo: '',
        }
    } else if (type == 'close') {
        bindMerAccountRef.value.close()
    } else if (type == 'confirm') {
        let data = {
            accountName: bindInfo.value.accountName,
            accountNo: bindInfo.value.accountNo
        }
        if (!data.accountName) return $global.message.warning('请输入绑定账户名称')
        if (!data.accountNo) return $global.message.warning('请输入绑定账户')

        createAccountByNo(data).then(res => {
            $global.message.success(res.msg)
            bindMerAccountFn('close')
            pageChange(1)
        })
    }
}



const pickAccount = (row) => {
    emit('pick', row)
}





</script>

<style lang="less" scoped></style>
